<template>
  <ul class="ul-wrapper">
    <AtomLi v-if="item.condition" 
      v-for="item in items.filter(a=>a.pid===rootPid)" :key="item.id" 
      :arrow="items.filter(a=>a.pid===item.id).length>0" 
      :selected="config.selected===item.id"
      :config="item"
      @click="click(item)">
      <template #title>
        <slot :name="item.id+'_title'">
        </slot>
      </template>
      <slot :name="item.id">
        <template v-if="items.filter(a=>a.pid===item.id).length>0">
          <AtomUl :config="config" :rootPid="item.id" :items="items"
            @click="$emit('click',$event)"></AtomUl>
        </template>
      </slot>
    </AtomLi>
  </ul>
</template>

<script>
export default {
  name:'AtomUl',
  components:{
    
  },
  data() {
    return {
      
    };
  },
  props: {
    config:{
      default:()=>{
        return {
          selected:null
        };
      }
    },
    rootPid:{
      default:()=>{
        return '';
      }
    },
    items:{
      default:()=>{
        return [];
      }
    },
  },
  watch: {},
  computed: {
    
  },
  created() {},
  mounted() {
    
  },
  methods: {
    click(item) {
      this.$set(this.config,'selected',item.id)
      this.$emit('click',item);
    },
    G_PickFn(o,value,...agrs){
      if(typeof o==='function'){
        return o(...args);
      }else{
        return value;
      }
    }
  }
};
</script>
<style scoped lang="scss">
 .ul-wrapper{
  list-style-type:none;
  width:100%;
  padding:2px 5px;
 }
</style>